<template>
	<view v-if="showForceLogin" class="force-login-wrap">
		<view class="force-login__content y-f">
			<view class="login-notice">为了提供更优质的服务，需要获取您的头像昵称</view>
			
			<button class="cu-btn author-btn" @tap="getuserinfo" >授权并查看</button>
			<button class="cu-btn close-btn" @tap="closeAuth">暂不授权</button>
		</view>
		<wechat-login ref="wechat_login" :hideTabbar="true" @callback="wechatRegister"></wechat-login>
	</view>
</template>
<script>
import store from '@/config/store.js';
import Wechat from "@/utils/wechat.js";
import { mapMutations, mapActions, mapState } from 'vuex';
export default {
	computed: {
		...mapState({
			...mapState(['showForceLogin'])
		})
	},
	props:{
		
	},
	methods: {
		...mapActions(['setTokenAndBack']),
		wechatRegister(e){
			if(e.code == 1)
			{
				store.commit('showForceLogin', false);
				this.$emit('loginSuccess','success'); //登录成功之后的回调
			}else{
				console.log('登录失败',e)
				//登录失败了
			}
		},
		async getuserinfo(e) {
			this.$refs.wechat_login.saveShowStatus(true)
		},
		closeAuth() {
			store.commit('showForceLogin', false);
		}
	}
};
</script>

<style lang="scss">
.force-login-wrap {
	position: fixed;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	z-index: 9999;
	top: 0;
	left: 0;
	//background: linear-gradient(180deg, rgba(239, 196, 128, 1) 0%, rgba(248, 220, 165, 1) 25%, rgba(255, 255, 255, 1) 98%);
	background: #FFFFFF;
	.logo-bg {
		width: 640rpx;
		height: 300rpx;
	}
	.force-login__content {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		.user-avatar {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-bottom: 40rpx;
		}
		.user-name {
			font-size: 35rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(132, 87, 8, 1);
			margin-bottom: 30rpx;
		}
		.login-notice {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: $uni-btn-color;
			line-height: 44rpx;
			width: 60%;
			margin-left: 20%;
			text-align: center;
			margin-bottom: 80rpx;
		}
		.author-btn {
			width: 630rpx;
			height: 80rpx;
			background: $uni-btn-color;
			border-radius: 40rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
		}
		.close-btn {
			width: 630rpx;
			height: 80rpx;
			margin-top: 30rpx;
			border-radius: 40rpx;
			border: 2rpx solid $uni-btn-color;
			background: none;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: $uni-btn-color;
		}
	}
}
</style>
